<template>
	<view class="index">


		<!-- 4.风险地区 -->
		<view class="risk">
			<!-- 标题 -->
			<view class="commonTitle1">--风险地区--</view>
			<!-- 高风险地区列表 -->
			<view class="higharea">
				<view class="title_h">高风险地区</view>
				<template v-if="newsListInfo_high.length>0">
					<view class="conten_high" v-for="(item) in newsListInfo_high">
						<text>{{item}}</text>
					</view>
				</template>
				<view v-if="newsListInfo_mid.length==0">暂无数据</view>
			</view>
			<!-- 中风险地区列表 -->
			<view class="midarea">
				<view class="title_m">中风险地区</view>
				<template v-if="newsListInfo_mid.length>0">
					<view class="conten_mid" v-for="(item) in newsListInfo_mid">
						<text>{{item}}</text>
					</view>
				</template>
				<view v-if="newsListInfo_mid.length==0">暂无数据</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				newsListInfo_high: [],
				newsListInfo_mid: []
			}
		},
		onLoad() {
			this.getRiskData()
		},
		methods: {
			// 1.获取风险地区数据的方法
			getRiskData() {
				uni.request({
					url: "https://api.tianapi.com/txapi/ncov/index?key=83fcdb1b0eaf62904f7869267cea8b97",
					method: "GET",
					success: (res) => {
						if (res.data.code == 200) {
							// 0属性的问题
							// console.log(res)
							// console.log(res.data.newslist[0].news)
							// console.log(res.data.newslist[0].riskarea.high)
							// console.log(res.data.newslist[0].riskarea.mid)
							// this.newsList=res.data.newslist[0].news
							if (res.data.newslist[0].riskarea) {
								this.newsListInfo_high = res.data.newslist[0].riskarea.high
								this.newsListInfo_mid = res.data.newslist[0].riskarea.mid
							}

						}
					}


				})
			},

		}
	}
</script>
<!-- scss 支持类嵌套  插件市场安装-->
<style lang="scss">
	/* >子类选择器 选择的的image */

	//风险地区样式
	.risk {
		// border: solid blue 1px;
		// 圆角
		border-radius: 33rpx;

		// 公共标题
		.commonTitle1 {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
		}

		.higharea {
			background-color: #ffffff;
			border-radius: 20rpx;

			.conten_high {
				// color: white;
			}

			.title_h {
				// text-align: center;
				color: #ff4727;
			}
		}

		.midarea {
			border-radius: 20rpx;
			background-color: #ffffff;

			.conten_mid {
				// color: white;
			}

			.title_m {
				// text-align: center;
				color: #f9f900;
			}
		}
	}
</style>
